<template>
    <div class="">
        <t-navbar title="执行任务" :fixed="false" class="custom-navbar">
            <template #right>
            </template>
        </t-navbar>
        <div class="p-3">
            <p>整体进度</p>
            <div class="example-progress__item">
                <t-progress :percentage="80" />
            </div>
        </div>
        <!-- table -->
        <t-table row-key="index" :data="data_table" :columns="columns" :bordered="bordered" :show-header="showHeader"
            cell-empty-content="-" @row-click="handleRowClick" @cell-click="handleCellClick"
            @scroll="handleScroll"></t-table>

        <div>
            <!-- step -->
            <div class="summary p-3">执行步骤
                <t-tag variant="outline" theme="success">17715440235</t-tag>
            </div>
            <div class="steps-horizontal-demo-block">
                <t-steps :current="options.first" @change="onFirstChange">
                    <t-step-item v-for="(_, index) in count" :key="index" :title="getTitle('first', index)"
                        content="辅助信息" />
                </t-steps>
            </div>

        </div>
        <div>
            <!-- form -->
            <div>
                <t-form ref="form" :data="formData" :rules="rules" reset-type="initial" show-error-message
                    label-align="left" :disabled="disabled" scroll-to-first-error="auto" @reset="onReset"
                    @submit="onSubmit">
                    <t-form-item label="性别" name="gender">
                        <t-radio-group v-model="formData.gender" class="box" borderless @change="groupChangeFn">
                            <t-radio :block="false" name="radio" value="man" label="男" />
                            <t-radio :block="false" name="radio" value="women" label="女" />
                            <t-radio :block="false" name="radio" value="secret" label="保密" />
                        </t-radio-group>
                    </t-form-item>
                    <t-form-item arrow label="生日" name="birth" content-align="right">
                        <t-input v-model="formData.birth" borderless align="right" placeholder="请输入内容"
                            @click="visible = true"></t-input>
                        <t-popup v-model="visible" placement="bottom">
                            <t-date-time-picker :value="formData.birth" :mode="['date']" title="选择日期" start="2015-5-5"
                                format="YYYY-MM-DD" @change="onChange" @pick="onPick" @confirm="onConfirm"
                                @cancel="onCancel" />
                        </t-popup>
                    </t-form-item>
                    <t-form-item label="年限" name="age" content-align="right">
                        <t-stepper v-model="formData.age" theme="filled" @change="onChangeStepper" />
                    </t-form-item>
                    <t-form-item label="服务得分" name="description" content-align="right">
                        <t-rate v-model="formData.description" variant="filled" allow-half/>
                    </t-form-item>
                    <t-form-item label="服务评价" name="resume">
                        <t-textarea v-model="formData.resume" class="textarea" indicator :maxlength="50"
                            placeholder="请输入个人简介"></t-textarea>
                    </t-form-item>

                    <div class="button-group">
                        <t-button theme="primary" type="submit" size="large">下一步</t-button>
                        <t-button theme="default" variant="base" type="reset" size="large">暂存</t-button>
                    </div>
                </t-form>
            </div>
        </div>
        <div style="height:120px;"></div>
    </div>

</template>

<script setup lang='ts'>
const data_table = []
const total = 3;
import { BrowseOffIcon } from 'tdesign-icons-vue-next';
function calcMobile(length, numToHide) {
    // 有效的运营商前缀
    const prefixes = [
        134, 135, 136, 137, 138, 139, 150, 151, 152, 157, 158, 159,
        182, 183, 184, 187, 188, 147, 178, 130, 131, 132, 155, 156,
        185, 186, 176, 180, 181, 189, 177, 145, 146, 173, 175, 170,
        171, 166, 167, 198, 199,
    ];

    // 随机选择一个前缀
    const prefix = prefixes[Math.floor(Math.random() * prefixes.length)];

    // 生成剩余的随机数字
    let phoneNumber = prefix.toString();
    for (let i = 0; i < length - 3; i++) { // 减去前三位
        phoneNumber += Math.floor(Math.random() * 10);
    }

    // 根据传入的numToHide隐藏相应数量的最后几位数字
    if (numToHide === 0) {
        return phoneNumber; // 不隐藏任何数字
    } else {
        const maskedPart = '*'.repeat(numToHide); // 创建由星号组成的字符串
        return phoneNumber.slice(0, -numToHide) + maskedPart;
    }
}

for (let i = 0; i < total; i++) {
    data_table.push({
        index: i + 1,
        mobile: [calcMobile(11, 4), calcMobile(11, 4), calcMobile(11, 4)][i % 3],
        status: ['已处理', '待处理', '未处理'][i % 3],
        channel: ['外呼系统', 'BMS', '其他'][i % 3],
        action: ['内容', '内容', '内容'][i % 3],
    });
}
const bordered = ref(true);
const showHeader = ref(true);

const columns = ref([
    { colKey: 'mobile', title: '号码', ellipsis: true },
    {
        colKey: 'status',
        title: '状态',
        ellipsis: true,
    },
    { colKey: 'channel', title: '渠道', ellipsis: true },
    { colKey: 'action', title: '操作', ellipsis: true },
]);

const handleRowClick = (e: any) => {
    console.log('row-cliek=====', e);
};

const handleCellClick = (e: any) => {
    console.log('cell-cliek=====', e);
};

const handleScroll = (e: any) => {
    console.log('scroll=====', e);
};

// step 

const options = reactive({
    first: 0,
    second: 1,
    third: 1,
});
const count = ref(4);
const onFirstChange = (current: number) => {
    options.first = current;
};
const onSecondChange = (current: number) => {
    options.second = current;
};
const onThirdChange = (current: number) => {
    options.third = current;
};

const getTitle = (type: 'first' | 'second' | 'third', index: number) => {
    if (index === options[type]) {
        return '当前步骤';
    }
    if (index < options[type]) {
        return '已完成';
    }
    if (index > options[type]) {
        return '未完成';
    }
};
// form


const props = defineProps({
    disabled: Boolean,
});
const { disabled } = toRefs(props);

// upload
const onFail = ({ file, e }: { file: UploadFile; e: ProgressEvent }): any => {
    console.log('---onFail', file, e);
    return null;
};

const onProgress = ({ file, percent, type, e }: ProgressContext) => {
    console.log('---onProgress:', file, percent, type, e);
};
const onChangeUpload = (files: Array<UploadFile>, { e, response, trigger, index, file }: UploadChangeContext) => {
    console.log('====onChange', files, e, response, trigger, index, file);
};
const onPreview = ({ file, e }: { file: UploadFile; e: MouseEvent }) => {
    console.log('====onPreview', file, e);
};
const onSuccess = ({ file, fileList, response, e }: SuccessContext) => {
    console.log('====onSuccess', file, fileList, e, response);
};
const onRemove = ({ index, file, e }: UploadRemoveContext) => {
    console.log('====onRemove', index, file, e);
};
const onSelectChange = (files: Array<UploadFile>) => {
    console.log('====onSelectChange', files);
};
const action = 'https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo';
const files = ref([
    {
        url: 'https://tdesign.gtimg.com/mobile/demos/example4.png',
        name: 'uploaded1.png',
        type: 'image',
    },
    {
        url: 'https://tdesign.gtimg.com/mobile/demos/example6.png',
        name: 'uploaded2.png',
        type: 'image',
    },
]);

const formData = reactive({
    gender: '',
    birth: '',
    place: '',
    age: 3,
    description: 2,
    resume: '',
    photo: files,
});
const form = ref(null);

const groupChangeFn = (value: any, context: { e: Event }) => {
    console.log(value, context);
};

const visible = ref(false);
const onChange = (value: string) => {
    console.log('change: ', value);
};

const onPick = (value: string) => {
    console.log('pick: ', value);
};

const onCancel = () => {
    console.log('cancel');
    visible.value = false;
};

const onConfirm = (value: string) => {
    console.log('confirm: ', value);
    formData.birth = value;
    visible.value = false;
};


const address = ref('120119');
const visibleCascader = ref(false);




// 步进器
const onChangeStepper = ($event: number) => {
    formData.age = $event;
};



// form
const onReset = () => {
    console.log('===onReset');
};

const onSubmit = (e: any) => {
    console.log('===onSubmit', e);
};

const rules = {
    name: [{ validator: (val: any) => val.length === 8, message: '只能输入8个字符英文' }],
    password: [{ validator: (val: any) => val.length > 6, message: '长度大于6个字符' }],
    gender: [{ validator: (val: any) => val !== '', message: '不能为空' }],
    birth: [{ validator: (val: any) => val !== '', message: '不能为空' }],
    place: [{ validator: (val: any) => val !== '', message: '不能为空' }],
    description: [{ validator: (val: any) => val > 3, message: '分数过低会影响整体评价' }],
    resume: [{ validator: (val: any) => val !== '', message: '不能为空' }],
};

onMounted(() => {
    // @ts-ignore
    form.value.setValidateMessage(rules);
});
</script>

<style lang="scss">
.box {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.textarea {
    height: 100px;
    width: 100%;
}

.button-group {
    background-color: var(--bg-color-demo, #fff);
    box-sizing: border-box;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    position: relative;
    border-bottom: 0.5px solid #e7e7e7;

    .t-button {
        height: 32px;
        flex: 1;

        &:not(:last-child) {
            flex: 1;
            margin-right: 16px;
        }
    }
}
.custom-navbar {
  --td-navbar-bg-color: #0052d9;
  --td-navbar-color: #fff;
}
</style>